Route Transitions কনফিগার করা

Ember.js Route Transitions হল এক রাউট থেকে অন্য রাউটে যাওয়ার প্রক্রিয়া, যা অ্যাপ্লিকেশনের নেভিগেশনে ব্যবহৃত হয়। Ember.js-এ রাউট ট্রানজিশনগুলি প্রাক-নির্ধারিতভাবে ম্যানেজ করা হয়, তবে আপনি এটি কাস্টমাইজ করতে পারেন এবং বিশেষ ট্রানজিশন কার্যকলাপ নির্ধারণ করতে পারেন, যেমন ডেটা লোডিং, লজিকাল চেক, বা টেমপ্লেট রেন্ডারিং। রাউট ট্রানজিশন কনফিগার করা সাধারণত model hooks, beforeModel, afterModel ফাংশন এবং অ্যাকশন ব্যবহার করে করা হয়।

Route Transitions কনফিগার করা

Ember.js-এ route transition কনফিগার করার সময়, সাধারণত আপনি নিচের বিভিন্ন hook ব্যবহার করেন:

1. beforeModel(): এই হুকটি রাউট পরিবর্তনের আগে কল করা হয়, এবং এটি একটি asynchronous operation (যেমন ডেটা লোড) পরিচালনা করতে সহায়ক।
2. model(): এই হুকটি রাউটের জন্য ডেটা ফেচ করার জন্য ব্যবহৃত হয়।
3. afterModel(): রাউটের মডেল লোড হওয়ার পরে এটি কল হয় এবং আপনি এখানে লজিক পরিচালনা করতে পারেন, যেমন ডেটা প্রক্রিয়া করা বা পুনঃনির্দেশনা পাঠানো।
4. setupController(): এই হুকটি কন্ট্রোলার সেটআপ করার জন্য ব্যবহৃত হয়, যখন মডেল ডেটা কন্ট্রোলারে পাঠানো হয়।

এগুলি বিভিন্ন রাউট ট্রানজিশন প্রক্রিয়া কাস্টমাইজ করতে ব্যবহৃত হয়।

1. beforeModel() হুক

beforeModel() হুকটি রাউট পরিবর্তনের আগে কল করা হয় এবং এটি asynchronous কাজগুলি সম্পন্ন করার জন্য ব্যবহার করা হয়, যেমন API কল, অনুমোদন চেক ইত্যাদি।

// app/routes/application.js
import Route from '@ember/routing/route';

export default class ApplicationRoute extends Route {
  beforeModel() {
    console.log('Before model hook');
    // এখানে আপনি API কল বা অনুমোদন চেক করতে পারেন
  }
}

এই হুকটি ব্যবহার করে, আপনি যদি চান যে একটি রাউটের জন্য বিশেষ শর্ত পূর্ণ হলে তার পরবর্তী রাউট ট্রানজিশন হবে, তবে এটি কাজ করবে।

2. model() হুক

model() হুকটি রাউটের জন্য মডেল ডেটা ফেচ করে এবং আপনি যখন রাউট পরিবর্তন করেন তখন এটি কল হবে। এটি ডেটা লোড করার জন্য গুরুত্বপূর্ণ।

// app/routes/post.js
import Route from '@ember/routing/route';

export default class PostRoute extends Route {
  model(params) {
    return this.store.find('post', params.post_id);  // ডাইনামিক সেগমেন্টের মাধ্যমে পোস্ট ফেচ করা
  }
}

এখানে, params.post_id রাউটের ডাইনামিক সেগমেন্ট থেকে আইডি নিয়ে find() মেথড ব্যবহার করে পোস্টের ডেটা ফেচ করা হয়েছে।

3. afterModel() হুক

afterModel() হুকটি মডেল লোড হওয়ার পর কল হয় এবং এটি এমন সময় ব্যবহৃত হয় যখন আপনি মডেল ডেটার উপর কোন অতিরিক্ত কাজ করতে চান, যেমন নেভিগেশন বা অন্যান্য লজিক।

// app/routes/post.js
import Route from '@ember/routing/route';

export default class PostRoute extends Route {
  model(params) {
    return this.store.find('post', params.post_id);
  }

  afterModel(post) {
    console.log('Post model loaded: ', post);
    // আপনি এখানে পোস্ট ডেটা প্রক্রিয়া করতে পারেন বা পুনঃনির্দেশনা পাঠাতে পারেন
  }
}

এখানে afterModel() হুকটি পোস্ট মডেল লোড হওয়ার পরে কল করা হয় এবং আপনি সেখানে পোস্ট সম্পর্কিত অতিরিক্ত কার্যকলাপ পরিচালনা করতে পারেন।

4. setupController() হুক

setupController() হুকটি একটি রাউটের জন্য কন্ট্রোলার সেটআপ করার সময় ব্যবহার করা হয়। এটি মডেল ডেটা কন্ট্রোলারে অ্যাসাইন করতে সহায়ক।

// app/routes/post.js
import Route from '@ember/routing/route';

export default class PostRoute extends Route {
  model(params) {
    return this.store.find('post', params.post_id);
  }

  setupController(controller, model) {
    super.setupController(controller, model);
    controller.set('post', model);  // মডেল ডেটা কন্ট্রোলারে পাঠানো
  }
}

এখানে setupController() হুকটি post মডেল কন্ট্রোলারে সেট করা হচ্ছে, যা টেমপ্লেট থেকে রেন্ডার করা হবে।

5. Transitioning between Routes

Ember.js-এ আপনি এক রাউট থেকে অন্য রাউটে নেভিগেট করতে transitionTo() মেথড ব্যবহার করতে পারেন। এটি আপনার রাউট ট্রানজিশনের উপর পূর্ণ নিয়ন্ত্রণ প্রদান করে।

// app/routes/application.js
import Route from '@ember/routing/route';

export default class ApplicationRoute extends Route {
  beforeModel() {
    this.transitionTo('home');  // অন্য রাউটে পুনঃনির্দেশ করা
  }
}

এখানে transitionTo() মেথড ব্যবহার করা হয়েছে একটি নির্দিষ্ট রাউটে পুনঃনির্দেশ করার জন্য।

6. queryParams এবং Query Parameters

Ember.js রাউট ট্রানজিশন এবং URL মান ব্যবহারের জন্য queryParams ব্যবহার করা যায়। এটি একটি রাউটের মধ্যে URL query string প্যারামিটার পরিচালনা করতে সহায়ক।

// app/routes/posts.js
import Route from '@ember/routing/route';

export default class PostsRoute extends Route {
  queryParams = {
    page: {
      refreshModel: true
    }
  };

  model(params) {
    return this.store.query('post', { page: params.page });
  }
}

এখানে, page প্যারামিটারটি URL এর query string থেকে প্রাপ্ত হবে এবং তা model() হুকের মাধ্যমে ডেটা ফেচ করার জন্য ব্যবহার করা হবে।

7. Handling Route Transitions Manually

Ember.js-এ route transitions স্বয়ংক্রিয়ভাবে ঘটে, তবে আপনি প্রয়োজনে ম্যানুয়ালি কন্ট্রোল করতে পারেন। বিশেষভাবে, যখন আপনি কিছু কাজ করার জন্য (যেমন ডেটা লোডিং) রাউট ট্রানজিশন থামাতে চান, তখন আপনি transitionTo() বা replaceWith() ব্যবহার করতে পারেন।

// app/routes/application.js
import Route from '@ember/routing/route';

export default class ApplicationRoute extends Route {
  beforeModel() {
    let userAuthenticated = this.checkUserAuthentication();
    if (!userAuthenticated) {
      this.transitionTo('login');
    }
  }

  checkUserAuthentication() {
    // এখানে ইউজারের অথেন্টিকেশন চেক করা হবে
    return false;  // উদাহরণস্বরূপ, ইউজার লগইন না থাকলে false
  }
}

এখানে, যদি ইউজার লগইন না থাকে, তবে অ্যাপ্লিকেশন login রাউটে রিডাইরেক্ট করবে।

Route Transitions Ember.js-এ রাউটের মধ্যে যাওয়া এবং আসার প্রক্রিয়া নিয়ন্ত্রণ করতে ব্যবহৃত হয়। আপনি beforeModel(), model(), afterModel(), এবং setupController() হুকের মাধ্যমে রাউট ট্রানজিশন কাস্টমাইজ করতে পারেন। transitionTo() মেথডের মাধ্যমে এক রাউট থেকে অন্য রাউটে যাওয়া যায়, এবং queryParams এর মাধ্যমে URL প্যারামিটারগুলো পরিচালনা করা যায়। এই হুক এবং মেথডগুলি আপনাকে Ember.js অ্যাপ্লিকেশনে আরো জটিল এবং কার্যকরী রাউট ট্রানজিশন কনফিগার করতে সহায়ক।